@import "../../../style/default";

body html div p a span i {
  font-family: 'PingFangSC-Regular', 'SourceHanSansCN-Normal', 'MicrosoftYaHeiLigh' !important;
}

input {
  background-color: transparent;
  -webkit-appearance: none;
  //letter-spacing: 2px !important;
  //font-size: 18px !important;

  &:-webkit-autofill, &:-webkit-autofill:active, &:-webkit-autofill:hover, &:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-text-fill-color: #333 !important;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    background-color: transparent;
    transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
    //letter-spacing: 2px !important;
    //font-size: 18px !important;
  }
}

.fn-login {
  width: 452px;
  height: 404px;
  padding: 40px 86px 64px 86px;
  background: rgba(255, 255, 255, 1);
  box-shadow: $fn-login-shadow;
  border-radius: 12px;
  position: absolute;
  left: $fn-login-left;
  top: 39.8%;

  .fn-form {
    padding-top: 30px;
  }

  .apes-tabs {
    .apes-tabs-bar {
      border-bottom: 0;
      margin-bottom: 40px;
      text-align: center;
    }

    .apes-tabs-tab-active {
      color: $login-tabs-color;
      letter-spacing: 0.5px;
    }

    .apes-form-item {
      margin-bottom: 0px;
    }

    .fn-first-item {
      margin-bottom: 16px !important;
    }

    .apes-tabs-ink-bar {
      background-color: $login-tabs-color;
      height: 4px;
      width: 140px;
      transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
    }
  }

  .apes-tabs-tab {
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    width: 140px;
    color: #999;
  }

  .apes-input-affix-wrapper {
    font-size: 20px;
  }

  .apes-input-affix-wrapper .apes-input-prefix {
    img {
      width: 24px;
      height: 24px;
    }

    color: #666;
    top: 52%;
  }

  .apes-input-affix-wrapper .apes-input-suffix {
    img {
      width: 24px;
      height: 24px;
    }

    color: $fn-login-color;
    top: 52%;
  }

  .apes-input-affix-wrapper .apes-input:not(:first-child) {
    padding-left: 44px;
  }

  .apes-input-affix-wrapper:hover .apes-input:not(.apes-input-disabled) {
    border-color: $fn-login-color;
  }

  .has-error .apes-input, .has-error .apes-input:hover, .has-error .apes-input:not([disabled]):hover {
    border: 1px solid rgba(221, 221, 221, 1);
  }

  .fn-login .has-error .apes-input {
    border-color: $fn-login-color;
  }

  .fn-login-input {
    letter-spacing: 2px;
    border-radius: 4px;
    border: 1px solid rgba(221, 221, 221, 1);
    font-size: 18px;
    height: 48px;

    &:hover, &:focus, &:checked {
      border-color: $fn-login-color;
    }
  }

  .fn-captcha-group {
    border: 1px solid rgba(221, 221, 221, 1);
    background-color: #fff;
    border-radius: 4px;
    margin-top: 1px;

    .apes-input-group-addon {
      padding: 0;
    }

    &:hover, &:focus, &:checked, &:active {
      border-color: $fn-login-color;
    }

    .fn-login-input {
      height: 46px;
    }
  }

  .fn-captcha-group-border {
    border-color: $fn-login-color;
  }

  .fn-captcha-btn {
    outline: none;
    border: 0px !important;
  }

  .icon {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.2);
    margin-left: 16px;
    vertical-align: middle;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      color: $primary-color;
    }
  }

  .other {
    text-align: left;
    margin-top: 24px;
    line-height: 22px;

    .apes-tooltip {
      vertical-align: middle;
    }

    .register {
      float: right;
    }
  }

  .apes-btn-primary {
    background-color: $login-btn-color;
    border-color: $login-btn-color;

    &:hover {
      background-color: $login-btn-color-h;
      border-color: $login-btn-color-h;
    }
  }

  .login-auto {
    color: $login-auto-color;
  }

  .login-forget {
    color: $login-forget-color;
  }

  .mb-lg {
    margin-bottom: 0px !important;
    margin-top: 2px !important;
    text-align: center;

    .apes-alert-error {
      background-color: transparent;
      border: 0px;
      color: #F56C6C;
      padding: 0px 15px;
    }
  }
}

.apes-btn__block {
  display: block !important;
  width: 100%;
  height: 44px;
}

.fn-btn {
  color: $fn-login-color;
  font-size: 16px;

  &:hover, &:focus {
    border-color: transparent;
  }
}

.fn-login-btn {
  margin-bottom: 0px !important;
  position: absolute !important;
  width: 280px;
  bottom: 64px;
}

.apes-btn-primary[disabled] {
  background-color: #ddd;
  border-color: #ddd;

  &:hover {
    background-color: #ddd;
    border-color: #ddd;
  }
}

input::-webkit-input-placeholder {
  /* WebKit browsers */
  letter-spacing: 0px;
}

input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  letter-spacing: 0px;
}

input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  letter-spacing: 0px;
}

input::-ms-input-placeholder {
  /* Internet Explorer 10+ */
  letter-spacing: 0px;
}

//  轻提示登录页强制隐藏
//.apes-message-notice {
//  display: none;
//}


.fn-right-img {
  //background: url("assets/tmp/img/fn/sj-background-right.png") 0 0 / 100% 100% no-repeat;
  background-image: $fn-right-img;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  z-index: 1;
  width: $fn-right-img-width;
  height: $fn-right-img-height;
  left: $fn-right-img-left;
  top: $fn-right-img-top;
}

.fn-login-head {
  position: absolute;
  left: $fn-login-head-left;
  top: 13.5%;
  z-index: 10;

  .fn-login-head-box {
    display: flex;

    .fn-one {
      margin-top: 8px;

      img {
        width: 64px;
        height: 64px;
        margin-top: 8px;
      }
    }

    .fn-two {
      //width:256px;
      height: 90px;
      font-size: 64px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
      line-height: 90px;
      margin-left: 16px;
    }

    .fn-the {
      height: 35px;
      padding: 3px 10px;
      background: $fn-fn-the-bg;
      border-radius: 3px;
      font-size: 24px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: $fn-fn-the;
      line-height: 32px;
      text-align: center;
      margin-left: 8px;
      margin-top: 18px;
      letter-spacing: 1px;
    }
  }

  .fn-login-head-value {
    width: 100%;
    height: 40px;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 40px;
    letter-spacing: 4px;
  }

  .fn-login-head-btn {
    width: 140px;
    height: 40px;
    border-radius: 26px;
    border: 1px solid $fn-login-head-btn;
    text-align: center;
    line-height: 38px;
    margin-top: 12px;
    cursor: pointer;

    span {
      font-size: 16px;
      font-weight: 400;
      color: $fn-login-head-btn-span;
    }

    img {
      width: 20px;
      height: 20px;
      vertical-align: sub;
      margin-left: 8px;
    }
  }
}


@media (max-width: 1900px) {
  .fn-login-head {

    .fn-login-head-box {
      margin-top: 7px;

      .fn-one {
        img {
          width: 51.2px;
          height: 51.2px;
          margin-top: 7px;
        }
      }

      .fn-two {
        margin-left: 11px;
        //width:208px;
        height: 73px;
        font-size: 52px;
        line-height: 73px;
      }

      .fn-the {
        height: 28px;
        padding: 3px 6px;
        font-size: 18px;
        line-height: 24px;
        margin-left: 8px;
        margin-top: 12px;
      }
    }

    .fn-login-head-value {
      height: 28px;
      font-size: 20px;
      line-height: 28px;
      letter-spacing: 5px;
    }

    .fn-login-head-btn {
      width: 108px;
      height: 32px;
      border-radius: 20px;
      line-height: 30px;

      span {
        font-size: 14px;
      }

      img {
        width: 16px;
        height: 16px;
        vertical-align: sub;
        margin-left: 4px;
      }
    }
  }

  .fn-login {
    width: 362px;
    height: 324px;
    padding: 24px 41px 24px 41px;

    .fn-form {
      padding-top: 0px;
    }

    .fn-login-btn {
      bottom: 24px;
    }
  }

}

@media screen and (max-width: 960px) {
  .fn-login {
    left: 2%;
    top: 33.8%;
  }

  .fn-right-img {
    display: none;
  }

  .fn-login-head {

    .fn-login-head-box {
      .fn-one {
        img {
          width: 38px;
          height: 38px;
        }
      }

      .fn-two {
        font-size: 38px;
        line-height: 63px;
        height: 60px;
      }

      .fn-the {
        height: 28px;
        padding: 3px 6px;
        font-size: 18px;
        line-height: 24px;
        margin-left: 8px;
        margin-top: 12px;
      }
    }

    .fn-login-head-value {
      //height: 25px;
      //font-size: 17px;
      //line-height: 25px;
      //letter-spacing: 4px;
      display: none;
    }

    .fn-login-head-btn {
      display: none;
    }
  }
}


